<!-- 
    说明：实践项目报名
 -->
<template>
  <section class="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page">
      <div class="banner">
        <img
          class="banner-bg"
          src="@/assets/images/productManage/banner.png"
          alt=""
          srcset=""
        />
        <p class="banner-text">创意探索 勇敢突破</p>
      </div>
      <div class="main">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item @click.native="$router.go(-1)">
              <span style="color: #3d6cb0; cursor: pointer">返回项目详情</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="base-info bottom-line" v-if="info && info.title">
          <div class="title">{{ info.title }} <span style='color:#f47c7c;font-size: 10px;'>(请在下方表单填写报名信息)</span></div>
          <div
            v-if="info.projectDescription"
            class="description"
            v-html="info.projectDescription"
          ></div>
          <div class="other-info">
            <span class="label">举办单位</span>
            <img
              class="hold-unit-url"
              v-if="info.holdUnitUrl"
              :src="info.holdUnitUrl"
              alt="举办单位"
              srcset=""
            />
            <span class="label">参赛类型</span>
            <span class="right">
              {{ entryTypeStr[info.entryType] || "--" }}
            </span>
            <span
              class="label"
              v-if="info.entryType && Number(info.entryType) !== 1"
              >团队人数限制</span
            >
            <span
              class="right"
              v-if="info.entryType && Number(info.entryType) !== 1"
            >
              {{ info.itemPeopleNum }}
            </span>
          </div>
          <ComBtn title="报名中..." />
        </div>
        <div class="join-product-info">
          <p class="title">项目报名</p>
          <!-- 报名类型;1:个人;2:团队 3:个人或团队 -->
          <div class="all-can-use" v-if="Number(info.entryType) === 3">
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="个人报名" name="1">
                    <div class="top-info-block" v-if="scheduleVO.startTime">
                        <p class="personal-info-row" style="margin-bottom: 20px">
                        <span class="label">报名日期：</span>
                        <span class="value"
                            >{{ scheduleVO.startTime }} ～
                            {{ scheduleVO.endTime }}</span
                        >
                        </p>
                        <p class="personal-info-row">
                        <span class="label">作品截止上传日期：</span>
                        <span class="value">{{ scheduleVO.closingDate }}</span>
                        </p>
                    </div>
                    <div class="personal-block">
                        <p class="personal-title">个人信息</p>
                        <el-row>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">参赛者：</div>
                            <div class="value">{{ currentStudentInfo.studentName }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">手机号：</div>
                            <div class="value">{{ currentStudentInfo.mobile }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">学校：</div>
                            <div class="value">{{ currentStudentInfo.schoolName }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="personal-text-row">
                            <div class="label">专业：</div>
                            <div class="value">{{ currentStudentInfo.major }}</div>
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <div class="personal-text-row">
                            <div class="label">个人介绍：</div>
                            <div class="right-box">
                                <el-input
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 6 }"
                                placeholder="请输入个人介绍（1-250字）"
                                v-model="personalForm.introduce"
                                maxlength="250"
                                >
                                </el-input>
                            </div>
                            </div>
                        </el-col>
                        </el-row>
                        <div class="upload-tips">
                        报名资料 <span>仅支持上传zip格式，仅上传一份文件</span>
                        </div>
                        <div>
                            <FileUpload v-if="!personalForm.annexName" :fileType="['zip']"  @success="handleAvatarSuccess">
                                <ComBtn>
                                上传资料
                                </ComBtn>
                            </FileUpload>
                            <div class="zip-show" v-else>
                                <img src="@/assets/images/productManage/zip.png" class="img" alt="">
                                <span class="file-name">{{ personalForm.annexName }}</span>
                                <span class="status">已上传</span>
                                <el-popconfirm
                                @confirm="delelteFile"
                                title="确定删除吗？"
                                >
                                <span slot="reference" class="delete-text">删除</span>
                                </el-popconfirm>
                                
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="团队报名" name="2" >
                    <div class="top-info-block" v-if="scheduleVO.startTime">
                        <p class="personal-info-row" style="margin-bottom: 20px">
                        <span class="label">报名日期：</span>
                        <span class="value"
                            >{{ scheduleVO.startTime }} ～
                            {{ scheduleVO.endTime }}</span
                        >
                        </p>
                        <p class="personal-info-row">
                        <span class="label">作品截止上传日期：</span>
                        <span class="value">{{ scheduleVO.closingDate }}</span>
                        </p>
                    </div>
                    <div class="personal-block">
                        <el-form :model="teamForm" :rules="teamRules" ref="ruleForm"></el-form>
                            <p class="personal-title">团队信息</p>
                            <el-row>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">团队名称：</div>
                                <div class="right-box">
                                    <el-input
                                    type="text"
                                    placeholder="请输团队名称（1-15字）"
                                    v-model="teamForm.teamName"
                                    >
                                    </el-input>
                                </div>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">团队介绍：</div>
                                <div class="right-box">
                                    <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 6 }"
                                    placeholder="请输入团队介绍（1-250字）"
                                    v-model="teamForm.introduce"
                                    maxlength="250"
                                    >
                                    </el-input>
                                </div>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">团队成员：</div>
                                <div class="right-option">
                                    <el-input
                                    class="left"
                                    type="text"
                                    placeholder="请输入手机号寻找团队成员"
                                    v-model="searchKey"
                                    >
                                    </el-input>
                                    <ComBtn title="添加成员" class="select-btn" @handleClick="searchStudent"></ComBtn>
                                </div>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div class="personal-text-row">
                                <div class="label">参赛选手：</div>
                                <div class="right-table">
                                    <div class="table-view">
                                        <el-row>
                                            <el-col :span="2">
                                                <p class="text-col head">编号</p>
                                            </el-col>
                                            <el-col :span="3"> <p class="text-col head">类型</p></el-col>
                                            <el-col :span="3"> <p class="text-col head">姓名</p></el-col>
                                            <el-col :span="6"> <p class="text-col head">手机号</p></el-col>
                                            <el-col :span="6"> <p class="text-col head">学校</p></el-col>
                                            <el-col :span="4"> <p class="text-col head">专业</p></el-col>
                                        </el-row>
                                        <el-row v-for="(item, index) in teamForm.stuList" :key="index" style="position: relative;">
                                            <el-col :span="2">
                                                <p class="text-col">{{ index + 1 }}</p>
                                            </el-col>
                                            <el-col :span="3">
                                                <p class="text-col cursor-pointer">
                                                    {{ item.mobile === currentStudentInfo.mobile ? '队长':'队员' }}
                                                </p>
                                            </el-col>
                                            <el-col :span="3">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.studentName"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.studentName }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.mobile"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.mobile }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.schoolName"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.schoolName }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="4">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.major"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.major }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <div v-if="Number(item.jobType) !== 1" @click="deleteRow(index)" class="delete-btn" style="position: absolute;cursor:pointer;width:25px;height:25px;right: -40px;top: 50%;transform: translateY(-50%);">
                                                <img src="@/assets/images/productManage/delete.png" style="display:block;width: 100%;height:100%;" alt="">
                                            </div>
                                        </el-row>
                                    </div>
                                </div>
                                </div>
                            </el-col>
                            </el-row>
                            <div class="upload-tips">
                            报名资料 <span>仅支持上传zip格式，仅上传一份文件</span>
                            </div>
                            <div>
                            <FileUpload v-if="!teamForm.annexName" :fileType="['zip']"  @success="handleAvatarSuccess">
                                <ComBtn>
                                上传资料
                                </ComBtn>
                            </FileUpload>
                            <div class="zip-show" v-else>
                                <img src="@/assets/images/productManage/zip.png" class="img" alt="">
                                <span class="file-name">{{ teamForm.annexName }}</span>
                                <span class="status">已上传</span>
                                <el-popconfirm
                                @confirm="delelteFile"
                                title="确定删除吗？"
                                >
                                <span slot="reference" class="delete-text">删除</span>
                                </el-popconfirm>
                                
                            </div>
                        </div>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 报名类型;1:个人;2:团队 3:个人或团队 -->
          <div class="personal-user" v-if="Number(info.entryType) === 1">
            <div class="top-info-block" v-if="scheduleVO.startTime">
                    <p class="personal-info-row" style="margin-bottom: 20px">
                    <span class="label">报名日期：</span>
                    <span class="value"
                        >{{ scheduleVO.startTime }} ～
                        {{ scheduleVO.endTime }}</span
                    >
                    </p>
                    <p class="personal-info-row">
                    <span class="label">作品截止上传日期：</span>
                    <span class="value">{{ scheduleVO.closingDate }}</span>
                    </p>
            </div>
            <div class="personal-block">
                <p class="personal-title">个人信息</p>
                <el-row>
                <el-col :span="12">
                    <div class="personal-text-row">
                    <div class="label">参赛者：</div>
                    <div class="value">{{ currentStudentInfo.studentName }}</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="personal-text-row">
                    <div class="label">手机号：</div>
                    <div class="value">{{ currentStudentInfo.mobile }}</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="personal-text-row">
                    <div class="label">学校：</div>
                    <div class="value">{{ currentStudentInfo.schoolName }}</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="personal-text-row">
                    <div class="label">专业：</div>
                    <div class="value">{{ currentStudentInfo.major }}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="personal-text-row">
                    <div class="label">个人介绍：</div>
                    <div class="right-box">
                        <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6 }"
                        placeholder="请输入个人介绍（1-250字）"
                        v-model="personalForm.introduce"
                        maxlength="250"
                        >
                        </el-input>
                    </div>
                    </div>
                </el-col>
                </el-row>
                <div class="upload-tips">
                报名资料 <span>仅支持上传zip格式，仅上传一份文件</span>
                </div>
                <div>
                    <FileUpload v-if="!personalForm.annexName" :fileType="['zip']"  @success="handleAvatarSuccess">
                        <ComBtn>
                        上传资料
                        </ComBtn>
                    </FileUpload>
                    <div class="zip-show" v-else>
                        <img src="@/assets/images/productManage/zip.png" class="img" alt="">
                        <span class="file-name">{{ personalForm.annexName }}</span>
                        <span class="status">已上传</span>
                        <el-popconfirm
                        @confirm="delelteFile"
                        title="确定删除吗？"
                        >
                        <span slot="reference" class="delete-text">删除</span>
                        </el-popconfirm>
                        
                    </div>
                </div>
            </div>
          </div>
          <div class="team-use" v-if="Number(info.entryType) === 2">
            <div class="top-info-block" v-if="scheduleVO.startTime">
                        <p class="personal-info-row" style="margin-bottom: 20px">
                            <span class="label">报名日期：</span>
                            <span class="value"
                                >{{ scheduleVO.startTime }} ～
                                {{ scheduleVO.endTime }}</span
                            >
                            </p>
                            <p class="personal-info-row">
                            <span class="label">作品截止上传日期：</span>
                            <span class="value">{{ scheduleVO.closingDate }}</span>
                            </p>
            </div>
            <div class="personal-block">
                <el-form :model="teamForm" :rules="teamRules" ref="ruleForm"></el-form>
                    <p class="personal-title">团队信息</p>
                    <el-row>
                    <el-col :span="20">
                        <div class="personal-text-row">
                        <div class="label">团队名称：</div>
                        <div class="right-box">
                            <el-input
                            type="text"
                            placeholder="请输团队名称（1-15字）"
                            v-model="teamForm.teamName"
                            >
                            </el-input>
                        </div>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="personal-text-row">
                        <div class="label">团队介绍：</div>
                        <div class="right-box">
                            <el-input
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 6 }"
                            placeholder="请输入团队介绍（1-250字）"
                            v-model="teamForm.introduce"
                            maxlength="250"
                            >
                            </el-input>
                        </div>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="personal-text-row">
                        <div class="label">团队成员：</div>
                        <div class="right-option">
                            <el-input
                            class="left"
                            type="text"
                            placeholder="请输入手机号寻找团队成员"
                            v-model="searchKey"
                            >
                            </el-input>
                            <ComBtn title="添加成员" class="select-btn" @handleClick="searchStudent"></ComBtn>
                        </div>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="personal-text-row">
                        <div class="label">参赛选手：</div>
                        <div class="right-table">
                            <div class="table-view">
                                <el-row>
                                    <el-col :span="2">
                                        <p class="text-col head">编号</p>
                                    </el-col>
                                    <el-col :span="3"> <p class="text-col head">类型</p></el-col>
                                    <el-col :span="3"> <p class="text-col head">姓名</p></el-col>
                                    <el-col :span="6"> <p class="text-col head">手机号</p></el-col>
                                    <el-col :span="6"> <p class="text-col head">学校</p></el-col>
                                    <el-col :span="4"> <p class="text-col head">专业</p></el-col>
                                </el-row>
                                <el-row v-for="(item, index) in teamForm.stuList" :key="index" style="position: relative;">
                                    <el-col :span="2">
                                        <p class="text-col">{{ index + 1 }}</p>
                                    </el-col>
                                    <el-col :span="3">
                                        <p class="text-col cursor-pointer">
                                            {{ item.mobile === currentStudentInfo.mobile ? '队长':'队员' }}
                                        </p>
                                    </el-col>
                                    <el-col :span="3">
                                        <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="item.studentName"
                                        placement="top"
                                        >
                                        <p class="text-col cursor-pointer">
                                            {{ item.studentName }}
                                        </p>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="item.mobile"
                                        placement="top"
                                        >
                                        <p class="text-col cursor-pointer">
                                            {{ item.mobile }}
                                        </p>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="item.schoolName"
                                        placement="top"
                                        >
                                        <p class="text-col cursor-pointer">
                                            {{ item.schoolName }}
                                        </p>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="item.major"
                                        placement="top"
                                        >
                                        <p class="text-col cursor-pointer">
                                            {{ item.major }}
                                        </p>
                                        </el-tooltip>
                                    </el-col>
                                    <div v-if="Number(item.jobType) !== 1" @click="deleteRow(index)" class="delete-btn" style="position: absolute;cursor:pointer;width:25px;height:25px;right: -40px;top: 50%;transform: translateY(-50%);">
                                        <img src="@/assets/images/productManage/delete.png" style="display:block;width: 100%;height:100%;" alt="">
                                    </div>
                                </el-row>
                            </div>
                        </div>
                        </div>
                    </el-col>
                    </el-row>
                    <div class="upload-tips">
                    报名资料 <span>仅支持上传zip格式，仅上传一份文件</span>
                    </div>
                    <div>
                        <p>111{{ teamForm.annexName }}</p>
                        <p>222{{ teamForm.url }}</p>
                    <FileUpload v-if="!teamForm.annexName" :fileType="['zip']"  @success="handleAvatarSuccess">
                        <ComBtn>
                        上传资料
                        </ComBtn>
                    </FileUpload>
                    <div class="zip-show" v-else>
                        <img src="@/assets/images/productManage/zip.png" class="img" alt="">
                        <span class="file-name">{{ teamForm.annexName }}</span>
                        <span class="status">已上传</span>
                        <el-popconfirm
                        @confirm="delelteFile"
                        title="确定删除吗？"
                        >
                        <span slot="reference" class="delete-text">删除</span>
                        </el-popconfirm>
                        
                    </div>
                </div>
                </el-form>
            </div>
          </div>
        </div>
        <div class="btn-box">
          <ComBtn title="提交" @handleClick="submitJoinForm" />
        </div>
      </div>
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import vueVideoPlayer from "@/components/videoPlayer/videoPlayer.vue";

import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header/index.vue";
import ComBtn from "./components/commonBtn";
import {
  getPraxisProjectItem,
  getStudentInfoByMobile,
  createProductEntry,
} from "../../request/api";
import moment from 'moment'
import { checkPhone } from '@/utils/utils'
import FileUpload from '@/components/FileUpload'
export default {
  // 组件名称
  name: "productJoin",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, ComBtn, vueVideoPlayer, FileUpload },
  // 组件状态值
  data() {
    return {
      action:
        process.env.VUE_APP_BASE_API + "/app-api/student/web-student/upload",
      // <!-- 报名类型;1:个人;2:团队 3:个人或团队 -->
      activeName: "1",
      recommond: "",
      // 个人表单
      personalForm: {
        annexName: "",
        annexUrl: "",
        entryType: 2, // 报名类型;1:团队;2:个人
        projectId: '',
        introduce: '',// 介绍
        studentId: '', // 队长学生id
        teamName: '', // 个人报名，没有团队名，传学生名字
        stuList: [],
      },
      // 团队表单
      teamForm: {
        annexName: "",
        annexUrl: "",
        entryType: 1, // 报名类型;1:团队;2:个人
        projectId: '',
        introduce: '',// 介绍
        studentId: '', // 队长学生id
        teamName: '', // 个人报名，没有团队名，传学生名字
        stuList: [],
      },
      searchKey: '',
      teamRules: {
          annexUrl: [
            { required: true, message: '请上传报名资料', trigger: 'blur' },
          ],
          introduce: [
            { required: true, message: '请填写团队介绍', trigger: 'blur' }
          ],
          teamName: [
            { required: true, message: '请填写团队名称', trigger: 'blur' }
          ],
          stuList: [
            { required: true, message: '请选择队员', trigger: 'blur' }
          ]
      },
      // 参赛类型;1:个人;2:团队;3:个人或团队
      entryTypeStr: {
        1: "个人",
        2: "团队",
        3: "个人或团队",
      },
      tipsList: {
        1004053023: "该手机号未注册",
        1004053024: "该队员未身份认证，请先认证",
        1004053025: "该队员已个人/团队报名，无法再次参加",
      },
      // 项目id
      id: "",
      // 当前用户数据
      currentStudentInfo: {},
      // 项目详情数据
      info: {
        id: "",
        title: "",
        projectTypeId: "",
        holdUnitUrl: "",
        holdUnitName: null,
        projectDescription: "",
        entryType: "",
        itemPeopleNum: "",
        entryInformation: "",
        competitionRules: "",
        reviewRules: "",
        reviewRequire: "",
        entryRequire: "",
        projectRewards: "",
        videoUrl: "",
        competitionOrganization: "",
        annexDownType: "",
        status: "",
        weight: "",
        releaseTime: null,
        examineFlag: "",
        examineStatus: "",
        examineNotes: "",
        submitTime: "",
        examinePeople: null,
        examineTime: "",
        scheduleType: "",
        projectTypeName: null,
        annexVOList: [],
        scheduleVOList: [],
      },
      updateFileName: "",
      updateFielUrl: "",
      code: "",
      scheduleVO: {
        startTime: "",
        endTime: "",
        closingDate: "",
      },
      resultEducation: {}
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.id = id;
      this.init();
    } else {
      this.$message.warning("数据不存在，请稍后重试");
      setTimeout(() => {
        this.$router.go(-1);
      }, 2000);
    }
  },
  // 组件方法
  methods: {
    deleteRow(index){
        this.teamForm.stuList.splice(index, 1)
    },
    getFileName(o){
        var pos=o.lastIndexOf('/');
        return o.substring(pos+1);  
    },
    handleAvatarSuccess({url, file}) {
        this.$message.success("资料上传成功～");
      // <!-- 报名类型;1:个人;2:团队 3:个人或团队 -->
      if (Number(this.activeName) === 2) {
        this.teamForm.annexName = file.name;
        this.teamForm.annexUrl = url;
      } else {
        this.personalForm.annexName = file.name;
        this.personalForm.annexUrl = url;
      }
    },
    delelteFile() {
        if (Number(this.activeName) === 2) {
        this.teamForm.annexName = '';
        this.teamForm.annexUrl = '';
      } else {
        this.personalForm.annexName = '';
        this.personalForm.annexUrl = '';
      }
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
      this.initForm()
    },
    onError() {
        this.$message.warning("上传失败，请稍后重试");
    },
    async searchStudent() {
        let isPhone = checkPhone(this.searchKey)
        if (!isPhone) {
            this.$message.error('请输入正确的手机号码')
            return
        }
        const studentInfo = await this.getStudentInfoByPhone(this.searchKey)
        if(studentInfo !== null && studentInfo.data) {
            let hasStudent = this.teamForm.stuList.find(item => {
                return item.studentId === studentInfo.data.studentId
            })
            if (hasStudent) {
                this.$message.error('该队员已存在，请勿重复添加')
            } else {
                this.teamForm.stuList.push(studentInfo.data)
            }
        }
    },
    submitJoinForm() {
      // <!-- 报名类型;1:个人;2:团队 3:个人或团队 -->
      if (Number(this.activeName) === 1) { // 个人
        // if (this.personalForm.introduce === "") {
        //     this.$message.warning("请填写个人简介～");
        //     return;
        // }
        if (!this.personalForm.stuList ||  Array.isArray(this.personalForm.stuList) && this.personalForm.stuList.length === 0) {
            this.$message.warning("请选择参赛选手～");
            return;
        }
        if (this.personalForm.annexName === "" || this.personalForm.annexUrl === "") {
            this.$message.warning("请上传报名资料～");
            return;
        }
        createProductEntry(this.personalForm).then((res) => {
            if(res.code === 0 ) {
                this.$message.success('报名成功');
                this.$router.replace({name:'productList'})
            } else {
                this.$message.error(res.msg);
            }
        });
      } else { // 团队
        if (this.teamForm.teamName === "") {
            this.$message.warning("请填写团队名称～");
            return;
        }
        if (this.teamForm.introduce === "") {
            this.$message.warning("请填写团队介绍～");
            return;
        }
        if (!this.teamForm.stuList || Array.isArray(this.teamForm.stuList) && this.teamForm.stuList.lengt === 0) {
            this.$message.warning("请选择参赛选手～");
            return;
        }
        if (this.teamForm.annexName === "" || this.teamForm.annexUrl === "") {
            this.$message.warning("请上传报名资料～");
            return;
        }
        const teamMaster = this.teamForm.stuList.find(item => Number(item.jobType) === 1)
        const param = {
            annexName: this.teamForm.annexName,
            annexUrl: this.teamForm.annexUrl,
            entryType: 1, // 报名类型;1:团队;2:个人
            projectId: this.id,
            introduce: this.teamForm.introduce,// 介绍
            studentId: teamMaster.studentId, // 队长学生id
            teamName: this.teamForm.teamName, // 个人报名，没有团队名，传学生名字
            stuList: this.teamForm.stuList,
        }
        createProductEntry(param).then((res) => {
            if(res.code === 0 ) {
                this.$message.success('报名成功');
                this.$router.replace({name:'productList'})
            } else {
                this.$message.error(res.msg);
            }
        });
      }
    },
    getHightestEducation(educationalExperience) {
        if (Array.isArray(educationalExperience) && educationalExperience.length) {
            const educationRank ={
                '博士': 0,
                '硕士': 1,
                '本科': 2,
                '大专': 3,
                '不限': 4
            }
            const theHighterEducation = educationalExperience.sort((a, b) => {
                return educationRank[a.educationalBackground] - educationRank[b.educationalBackground]
            })
            return theHighterEducation[0]
        } else {
            return null
        }   
    },
    // 手机号获取学生报名数据
    getStudentInfoByPhone(phone) {
      return new Promise((resolve, reject) => {
        getStudentInfoByMobile({
            projectId: this.id,
            mobile: phone,
        }).then((res) => {
            if (
                res.data.code &&
                 [1004053023, 1004053024, 1004053025].indexOf(Number(res.data.code)) > -1
            ) {
                // 状态异常，无法报名
                this.$message.warning(this.tipsList[res.data.code]);
                reject(null)
            } else if (res.code === 0 && res.data) {
                let loginUserMobile = localStorage.getItem("userMobile");
                let userInfo = res.data;
                let isSelf = Number(phone) === Number(loginUserMobile)
                if (Array.isArray(userInfo.educationalExperience) && userInfo.educationalExperience.length > 0) {
                    // 从所有简历中，拿到最高学历，用于报名
                    let educationInfo = this.getHightestEducation(userInfo.educationalExperience)
                    let studentInfo = {
                        birthday: moment(userInfo.birthday).format('yyyy-MM-DD HH:mm:ss'),
                        currentCapacity: userInfo.political, // 政治身份
                        education: educationInfo.educationalBackground,
                        grade: educationInfo.grade,
                        jobType: loginUserMobile === phone ? 1: 2 , // 职位类型;1:队长;2:队员
                        major: educationInfo.major,
                        mobile: phone,
                        projectId: this.id,
                        schoolName: educationInfo.schoolName,
                        studentId: userInfo.studentId,
                        studentName: userInfo.studentName,
                        educationInfo
                    }
                    resolve({
                        data: studentInfo,
                    })
                } else {
                    if (isSelf) {
                        this.$router.replace({name: 'resumeReview'})
                        setTimeout(() => {
                            this.$message.warning('请先完善简历教育经历～')
                        }, 1000);
                    } else {
                        this.$message.warning('该学生简历信息未完善，请先完成简历信息填写')
                    }
                    reject(null)
                }
            }
        });
      })
    },
    initForm () {
        //<!-- 报名类型;1:个人;2:团队 3:个人或团队 -->
        if (Number(this.activeName) === 1) {
            this.personalForm = {
                annexName: this.personalForm.annexName  || '',
                annexUrl: this.personalForm.annexUrl  || '',
                entryType: 2, // 报名类型;1:团队;2:个人
                projectId: this.id,
                introduce: this.personalForm.introduce || '',// 介绍
                studentId: this.currentStudentInfo.studentId, // 队长学生id
                teamName: this.currentStudentInfo.studentName, // 个人报名，没有团队名，传学生名字
                stuList: [
                    {
                        birthday: moment(this.currentStudentInfo.birthday).format('yyyy-MM-DD HH:mm:ss'),
                        currentCapacity: this.currentStudentInfo.currentCapacity,
                        education: this.currentStudentInfo.education,
                        grade: this.currentStudentInfo.grade,
                        jobType: 1, // 职位类型;1:队长;2:队员
                        major: this.currentStudentInfo.major,
                        projectId:this.id,
                        mobile: this.currentStudentInfo.mobile,
                        schoolName: this.currentStudentInfo.schoolName,
                        studentId: this.currentStudentInfo.studentId,
                        studentName: this.currentStudentInfo.studentName,
                    }
                ],
            }
        } else {
            this.teamForm = {
                annexName: this.teamForm.annexName,
                annexUrl: this.teamForm.annexUrl,
                entryType: 1, // 报名类型;1:团队;2:个人
                projectId: this.id,
                introduce: this.teamForm.introduce,// 介绍
                studentId: this.currentStudentInfo.studentId, // 队长学生id
                teamName: this.teamForm.teamName, // 个人报名，没有团队名，传学生名字
                stuList: this.teamForm.stuList,
            }
            if (this.teamForm.stuList.length === 0) {
                this.teamForm.stuList =[
                    {
                        birthday: moment(this.currentStudentInfo.birthday).format('yyyy-MM-DD HH:mm:ss'),
                        currentCapacity: this.currentStudentInfo.currentCapacity,
                        education: this.currentStudentInfo.education,
                        grade: this.currentStudentInfo.grade,
                        jobType: 1, // 职位类型;1:队长;2:队员
                        major: this.currentStudentInfo.major,
                        projectId:this.id,
                        mobile: this.currentStudentInfo.mobile,
                        schoolName: this.currentStudentInfo.schoolName,
                        studentId: this.currentStudentInfo.studentId,
                        studentName: this.currentStudentInfo.studentName,
                    }
                ]
            }
        }
    },
    async init() {
        // 获取当前学生信息
        let mobile = localStorage.getItem('userMobile')
        const res = await this.getStudentInfoByPhone(mobile)
        // 初始化一次个人、团队表单
        if (res) {
            this.currentStudentInfo = res.data
                let params = {
                id: this.id,
            };
            // 获取产品详情
            getPraxisProjectItem(params).then((res) => {
                console.log("项目详情>>>", res);
                if (res.code === 0 && res.data) {
                this.info = res.data;
                //<!-- 报名类型;1:个人;2:团队 3:个人或团队 -->
                this.activeName = this.info.entryType === 2 ? '2' : '1'
                this.initForm()
                }
            });
        }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;
  .bottom-line {
    border-bottom: 1px solid #eaeaea;
  }
  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    overflow-y: auto;
    .banner {
      position: relative;
      width: 100%;
      height: 220px;
      .banner-bg {
        position: relative;
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .banner-text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translate3d(0, -50%, 0);
        font-size: 38px;
        font-family: "PingFangSC-Light, PingFang SC";
        font-weight: 300;
        color: #ffffff;
        line-height: 53px;
      }
    }
    .main {
      background: #fff;
      width: 1200px;
      margin: 15px auto 0;
      padding: 23px 30px;
      min-height: 500px;
    }
    .base-info {
      position: relative;
      padding: 40px 0 40px;
      .title {
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 21px;
      }
      .description {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 31px;
        margin-bottom: 20px;
      }
      .other-info {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 22px;
        .label {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 60px;
          margin-right: 39px;
        }
        .hold-unit-url {
          max-height: 44px;
          margin-right: 110px;
        }
        .right {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 60px;
          margin-right: 110px;
        }
      }
    }
    .join-product-info {
      padding: 25px 0 40px;
      .title {
        font-size: 25px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 36px;
        margin-bottom: 28px;
      }
    }
    .top-info-block {
      padding: 35px 0;
      .personal-info-row {
        line-height: 40px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        .label {
          margin-right: 14px;
        }
        .value {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 40px;
        }
      }
    }
    .personal-block {
      position: relative;
      background: #f9f9f9;
      border-radius: 6px;
      border: 1px solid #f0f0f0;
      padding: 25px;
      .personal-title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 28px;
        margin-bottom: 38px;
      }
      .personal-text-row {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        margin-bottom: 20px;
        .label {
          width: 140px;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 25px;
        }
        .value {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 25px;
        }
        .right-box {
          flex: 1;
        }
        .right-option {
            flex: 1;
            display: flex;
            .left {
                margin-right: 15px;
            }
            .select-btn {
                height: 40px;
                line-height: 40px;
                font-size: 15px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                width: 135px;
                padding: 0;
                text-align: center;
            }
        }
      }
      .right-table {
        flex :1 ;
      }
      .table-view {
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #d4d6da;
        border-left: 1px solid #d4d6da;
        .text-col {
            border-right: 1px solid #d4d6da;
            border-bottom: 1px solid #d4d6da;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 40px;
            text-align: center;
            width: 100%;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 5px;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        .head {
            background: #f6f7f8;
        }
        .href-link {
            cursor: pointer;
            color: #3d6cb0;
        }
    }
    .zip-show {
        position: relative;
        width: 100%;
        height: 60px;
        border: 1px dashed #D4D6DA;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        .img {
            width: 25px;
            height: 25px;
            margin-right: 15px;
        }
        .file-name {
            max-width: 50%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383D;
            line-height: 60px;
            margin-right: 12px;
        }
        .status {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C4C4C4;
            line-height: 60px;
        }
        .delete-text {
            position: absolute;
            top: 0;
            right: 15px;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FA606A;
            cursor: pointer;
        }
    }
    }
    .upload-tips {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 28px;
      margin-bottom: 25px;
      span {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c4c4c4;
        line-height: 21px;
        margin-left: 15px;
      }
    }
    .btn-box {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      margin-top: 60px;
    }
  }
}
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/ .el-tabs__item {
  height: 48px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9597a0;
  line-height: 48px;
}
/deep/ .el-tabs__item.is-active {
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #3d6cb0;
  line-height: 48px;
}
</style>
